import IconGlobal from '@/assets/svg/icon-global';
import IconProfileAvatar from '@/assets/svg/icon-profile-avatar';
import IconProfileMenu from '@/assets/svg/icon-profile-menu';
import React, { memo, useEffect, useState } from 'react';
import { RightWrapper } from './style';

const HeaderRight = memo(() => {
  const [isShowPanel, setIsShowPanel] = useState(false);
  function switchShowPanel() {
    setIsShowPanel(true);
  }
  useEffect(() => {
    function windowHandleClick() {
      setIsShowPanel(false);
    }
    window.addEventListener('click', windowHandleClick, true); //将冒泡调整为捕获，不然点了之后，就会冒泡到顶层的事件设置为false。
    return () => {
      window.removeEventListener('click', windowHandleClick, true);
    };
  }, []);
  return (
    <RightWrapper>
      <div className="btns">
        <span className="btn">登录</span>
        <span className="btn">注册</span>
        <span className="btn">
          <IconGlobal> </IconGlobal>
        </span>
      </div>
      <div className="profile" onClick={switchShowPanel}>
        <IconProfileMenu></IconProfileMenu>
        <IconProfileAvatar></IconProfileAvatar>
        {isShowPanel && (
          <div className="panel">
            <div className="top">
              <div className=" item register">注册</div>
              <div className=" item login">登录</div>
            </div>
            <div className="bottom">
              <div className="item">出租房源</div>
              <div className="item">开展体验</div>
              <div className="item">帮助</div>
            </div>
          </div>
        )}
      </div>
    </RightWrapper>
  );
});

export default HeaderRight;
